<template>
	<div class="page-title">
		<div class="title-wrap">
			<el-breadcrumb separator-class="el-icon-arrow-right">
				<el-breadcrumb-item
					:to="item.url ? { path: item.url } : null"
					v-for="(item, index) in routeList"
					:key="index"
				>
					<i class="icon" :class="item.logo" v-if="item.logo"></i>
					{{ item.resrName }}
				</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<div class="title-btn">
			<slot name="button"></slot>
		</div>
	</div>
</template>

<script>
import { mapState } from "vuex"
export default {
	name: "pageTitle",
	props: {},
	data() {
		return {}
	},
	computed: {
		...mapState({
			routeList: (state) => state.token.routeList,
		}),
	},
}
</script>

<style lang="scss" scoped>
.page-title {
	position: relative;
	height: 50px;
	line-height: 50px;
	font-size: 16px;
	font-weight: 500;
	.title-wrap {
		padding: 0 20px;
		/deep/ .el-breadcrumb {
			line-height: 50px;
		}
		.icon {
			font-size: 14px;
		}
	}
	.title-btn {
		position: absolute;
		top: 0px;
		right: 20px;
	}
}
</style>